<template>
	<div class="player" @mouseenter="drawer=true" @mouseleave="drawer=false">
		<el-drawer
		  title="播放列表"
		  :visible.sync="drawer"
		  direction="ltr"
		  :modal="false"
		  :withHeader="false">
		  <p class="dq">当前播放:{{dq}}</p>
		  <ul>
			  <li v-for="(video,index) in videos" @click="onChange(index)" :class="{active:index == index1}">{{video.name}}</li>
		  </ul>
		</el-drawer>
		<video-player class="goods-video" ref="videoPlayer" :options="playerOptions"></video-player>
	</div>
</template>

<script>
	import { videoPlayer } from 'vue-video-player'
	import 'video.js/dist/video-js.css'
	import {fetchVideos} from '@/api/video.js'
	export default {
		name: 'Video-player',
		data() {
			return {
				playerOptions: {
					poster: 'https://api.btstu.cn/sjbz/api.php?lx=meizi', //视频封面图
					language: 'zh-CN',
					sources: [{
							type: "video/webm", //视频格式
							src: 'https://wdz-1258450135.cos.ap-shanghai.myqcloud.com/video/10-21_HN10-5073722275_01.webm' //视频地址
						}
					]
				},
				drawer: false,
				videos: [],
				dq: '',
				index1: 0
			}
		},
		components:{
			"video-player":videoPlayer
		},
		computed: {
			player() {
				return this.$refs.videoPlayer.player;
			}
		},
		methods: {
			onChange(index) {
				//this.player.pause(); // 滑动后暂停播放
				this.index1 = index;
				this.playerOptions={
					poster: 'https://api.btstu.cn/sjbz/api.php?lx=meizi', //视频封面图
					language: 'zh-CN',
					sources: [
						this.videos[index]
					]
				};
				this.dq =  this.videos[index].name;
			},
			fetchVideos(){
				fetchVideos().then(res => {
					this.videos = res.data;
					this.playerOptions['sources'][0] = this.videos[0];
					this.dq =  this.videos[0].name;
				})
			}
		},
		created() {
			this.fetchVideos();
		}
	}
</script>

<style>
</style>
<!-- 视频播放器 -->
<style lang="less">
	.vjs_video_3-dimensions {
		width: 100% !important;
	}
	.video-js{
		width: 100% !important;
	}
	.vjs-big-play-button {
		top: 45% !important;
		left: 45% !important;
	}
	.player{
		.el-drawer__wrapper{
			.el-drawer__header{
				color: #FFFFFF;
			}
			color: #FFFFFF;
			position: absolute;
			margin: 10px 0 40px 10px;
			z-index: 1 !important;
			.el-drawer{
			background-color: rgba(0,0,0,0.8);
			width: 100% !important;
			}
		}
		.el-drawer__wrapper {
			width: 30%;
			display: inline-block;
		}
		.el-drawer__body{
			padding-top: 30px;
			p{
				margin-bottom: 20px;
			}
		}
	}
</style>
<style scoped lang="less">
	.player{
		position: relative;
		z-index: 1 !important;
		.dq{
			padding: 10px;
			padding-left: 30px;
		}
		li{
			padding: 10px;
			padding-left: 40px;
			cursor: pointer;
			&:hover{
				color: #dcdcdc;
			}
		}
		li.active{
			color: orangered !important;
		}
	}
	.goods-swipe {
		position: relative;
		height: 350px;
		width: 100%;

		/deep/.van-swipe__track {
			.van-swipe-item {
				.van-image {
					height: 100%;
					width: 100%;
				}

				.goods-video {
					height: 100%;

					.video-js {
						width: 100%;
						height: 100%;
					}

					.vjs-control-bar {
						bottom: 40px;
					}

					.vjs-big-play-button {
						border-radius: 50%;
						width: 40px;
						height: 40px;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						margin: 0;
						line-height: normal;

						.vjs-icon-placeholder {
							&:before {
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								width: auto;
								height: auto;
							}
						}
					}

					.vjs-control-bar {

						// opacity: 1 !important;
						.vjs-play-control,
						.vjs-fullscreen-control {
							.vjs-icon-placeholder {
								&:before {
									top: 50%;
									left: 50%;
									transform: translate(-50%, -50%);
									width: auto;
									height: auto;
									font-size: 25px;
								}
							}
						}

						.vjs-volume-panel,
						.vjs-picture-in-picture-control {
							display: none;
						}
					}
				}
			}
		}

		.swipe-item-category {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			font-size: 10px;
			color: #fff;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10px;

			span.text {
				width: 32px;
				height: 15px;
				line-height: 15px;
				background: rgba(241, 241, 241, 0.3);
				border-radius: 7px;
				margin: 0 5px;
				text-align: center;

				&.ac {
					background: linear-gradient(90deg, rgba(255, 102, 102, 1), rgba(255, 136, 76, 1));
				}
			}

		}

		.custom-indicator {
			position: absolute;
			font-size: 10px;
			width: 32px;
			height: 15px;
			right: 20px;
			bottom: 10px;
			background: rgba(241, 241, 241, 0.3);
			border-radius: 7px;
			font-weight: bold;
			color: #222;
			text-align: center;

			.current {
				color: #fb6463;
			}
		}
	}
</style>
